import React from 'react'
import './index.scss'
import { NavLink,Link } from 'react-router-dom'


const TabBar = props =>{

    const tabbars = [
        {
            id:1,
            text:'首页',
            iconName:'gem',
            path:'/home/hot'
        },
        {
            id:2,
            text:'商品',
            iconName:'shopping-basket',
            path:'/goods'
        },
        {
            id:3,
            text:'分类',
            iconName:'filter',
            path:'/category'
        },
        {
            id:4,
            text:'购物车',
            iconName:'shopping-cart',
            path:'/shoppingCart'
        },
        {
            id:5,
            text:'我的',
            iconName:'user-tie',
            path:'/mine'
        },
    ]

    const renderItem = () => {
        return tabbars.map(item => (
                <li
                    key = { item.id }
                >
                    <NavLink
                        to = { item.path }
                        activeClassName = "active"
                    >
                        <i className = { 'fas fa-' + item.iconName }></i>
                        <span>{ item.text }</span>
                    </NavLink>
                </li>
        ))
    }

    return(
        <footer>
            <ul>
                { renderItem() }
            </ul>
        </footer>
    )
}

export default TabBar